import React, { Component } from 'react';
import axios from 'axios'

export default class Dish extends Component {
    state={
        tabIndex:0, // 选中的tab 下标
        dish:{}, // 菜品数据
        currentList:[] //当前选中tab后的 显示的菜品列表
    }
    componentWillMount(){
        axios.get('/api/dish').then((res)=>{
            this.setState({dish:res.data});

            // 设置默认选中tab后的菜品列表 ，默认选择的tab index为0
            let currentList=res.data[Object.keys(res.data)[0]];
            this.setState({currentList:currentList});
            console.log('api/dish res.data',res.data)
        })
    }
    render() {
        let {dish,currentList,tabIndex}=this.state;
        return (
            <div>
                <div className="left">
                    {Object.keys(dish).map((item,index)=>{

                        return <div className={tabIndex===index?'active':''} data-index={index} key={index} onClick={(e)=>{
                            console.log('点击 index',e.target.getAttribute('data-index')) ;
                            this.setState({tabIndex:e.target.getAttribute('data-index')});
                             e.target.setAttribute('class','active');
                          
                            // 根据用户点击的tab 设置 currentList
                            let currentList=this.state.dish[Object.keys(this.state.dish)[e.target.getAttribute('data-index')]];
                            this.setState({currentList:currentList});
                        }}>{item}</div>
                    })}
                </div>
                <div className="right">
                    {currentList.map((item)=>{
                        return <div key={item.id}>
                         <img src={item.image} alt="" /><br/>
                          {item.name}<br/>
                          {item.desc}<br/>
                        </div>
                    })}
                </div>
            </div>
        )
    }
}
